<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>量化交易数据看板</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="/public/libs/echarts.min.js"></script>
    <style>
        :root {
            --primary-bg: #ffffff;
            --secondary-bg: #f8f9fa;
            --card-bg: #ffffff;
            --text-primary: #212529;
            --text-secondary: #6c757d;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --accent-color: #007bff;
            --border-radius: 8px;
            --border-color: #dee2e6;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--primary-bg);
            color: var(--text-primary);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 15px;
            line-height: 1.6;
            overflow: hidden;
            margin: 0;
            height: 100vh;
            box-sizing: border-box;
        }

        .dashboard-container {
            max-width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .dashboard-header {
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .dashboard-title {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--text-primary);
            margin: 0;
        }

        .update-time {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        /* 卡片样式 */
        .dashboard-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--border-color);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .dashboard-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--text-primary);
            margin: 0;
        }

        .card-icon {
            font-size: 1.5rem;
            opacity: 0.8;
        }

        /* 数据指标卡片 */
        .metric-card {
            text-align: center;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .metric-value {
            font-size: 1.6rem;
            font-weight: bold;
            margin: 8px 0;
        }

        .metric-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .metric-change {
            font-size: 0.8rem;
            margin-top: 5px;
        }

        /* 状态指示器 */
        .status-badge {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .status-running {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }

        .status-stopped {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--danger-color);
            border: 1px solid var(--danger-color);
        }

        .status-paused {
            background-color: rgba(255, 193, 7, 0.1);
            color: var(--warning-color);
            border: 1px solid var(--warning-color);
        }

        .status-connected {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }

        .status-disconnected {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--danger-color);
            border: 1px solid var(--danger-color);
        }

        /* 表格样式 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            color: var(--text-primary);
            table-layout: fixed;
            /* 固定表格布局 */
        }

        /* 表格响应式滚动 */
        .table-responsive {
            overflow-x: auto;
            /* 允许水平滚动 */
            overflow-y: auto;
            /* 允许垂直滚动 */
            max-height: 300px;
            /* 设置最大高度 */
        }

        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .data-table th {
            background-color: var(--secondary-bg);
            font-weight: bold;
            color: var(--text-secondary);
        }

        .data-table tr:hover {
            background-color: var(--secondary-bg);
        }

        /* 图表容器 */
        .chart-container {
            height: 250px;
            width: 100%;
            flex-shrink: 0;
        }

        /* 列表样式 */
        .status-list {
            list-style: none;
            padding: 0;
        }

        .status-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .status-list li:last-child {
            border-bottom: none;
        }

        /* 盈利/亏损样式 */
        .profit-positive {
            color: var(--success-color);
        }

        .profit-negative {
            color: var(--danger-color);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .dashboard-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .dashboard-title {
                font-size: 1.5rem;
            }

            .metric-value {
                font-size: 1.5rem;
            }

            .chart-container {
                height: 250px;
            }
        }

        /* 实时数据指示器 */
        .live-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: var(--success-color);
            border-radius: 50%;
            margin-right: 5px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="dashboard-container">
        <!-- 页面头部 -->
        <div class="dashboard-header">
            <h1 class="dashboard-title">量化交易数据看板</h1>
            <div class="update-time">
                <span class="live-indicator"></span>
                <span id="last-update">最后更新: 加载中...</span>
            </div>
        </div>

        <!-- 核心指标区 -->
        <div class="row mb-3" style="margin-bottom: 15px; flex-shrink: 0;">
            <div class="col-md-3">
                <div class="dashboard-card metric-card">
                    <div class="metric-label">程序总状态</div>
                    <div class="metric-value" id="program-status">
                        <span class="status-badge status-running">运行中</span>
                    </div>
                    <div class="metric-change">
                        <span id="uptime">运行时长: 00:00:00</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="dashboard-card metric-card">
                    <div class="metric-label">资金费率盈利 (今日)</div>
                    <div class="metric-value profit-positive" id="funding-profit">$+128.50</div>
                    <div class="metric-change profit-positive">+2.3% 较昨日</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="dashboard-card metric-card">
                    <div class="metric-label">套利盈利 (累计)</div>
                    <div class="metric-value profit-positive" id="arbitrage-profit">$+2,345.88</div>
                    <div class="metric-change profit-positive">+5.7% 本周</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="dashboard-card metric-card">
                    <div class="metric-label">当前总权益</div>
                    <div class="metric-value" id="total-equity">$50,123.45</div>
                    <div class="metric-change profit-positive">+0.4% 今日</div>
                </div>
            </div>
        </div>

        <!-- 连接与策略状态区 -->
        <div class="row mb-4">
            <div class="col-lg-4">
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">账户连接状态</h3>
                    </div>
                    <ul class="status-list" id="exchange-status-list">
                        <li>
                            <span>Binance 现货</span>
                            <span class="status-badge status-connected">已连接</span>
                        </li>
                        <li>
                            <span>Bybit 合约</span>
                            <span class="status-badge status-connected">已连接</span>
                        </li>
                        <li>
                            <span>OKX</span>
                            <span class="status-badge status-disconnected">连接断开</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">策略运行状态</h3>
                    </div>
                    <ul class="status-list" id="strategy-status-list">
                        <li>
                            <span>资金费率套利</span>
                            <span class="status-badge status-running">运行中</span>
                        </li>
                        <li>
                            <span>跨所现货套利</span>
                            <span class="status-badge status-paused">暂停</span>
                        </li>
                        <li>
                            <span>网格交易 (BTC/USDT)</span>
                            <span class="status-badge status-running">运行中</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">订单统计 (今日)</h3>
                    </div>
                    <div class="chart-container" id="order-stats-chart"></div>
                </div>
            </div>
        </div>

        <!-- 图表与账户数据区 -->
        <div class="row mb-4">
            <div class="col-lg-8">
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">收益曲线 (近7天)</h3>
                    </div>
                    <div class="chart-container" id="profit-chart"></div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">资产分布</h3>
                    </div>
                    <div class="chart-container" id="asset-distribution-chart"></div>
                </div>
            </div>
        </div>

        <!-- 账户数据详情区 -->
        <div class="row">
            <div class="col-12">
                <div class="dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">账户资金数据概览</h3>
                    </div>
                    <div class="table-responsive">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>账户名称</th>
                                    <th>总余额 (USDT)</th>
                                    <th>可用余额 (USDT)</th>
                                    <th>持仓盈亏 (USD)</th>
                                    <th>盈亏比例</th>
                                    <th>活跃订单</th>
                                    <th>上次同步时间</th>
                                </tr>
                            </thead>
                            <tbody id="account-data-body">
                                <tr>
                                    <td>Binance (现货)</td>
                                    <td>15,000.00</td>
                                    <td>5,000.00</td>
                                    <td class="profit-positive">+50.00</td>
                                    <td class="profit-positive">+0.33%</td>
                                    <td>3</td>
                                    <td>11:28:05</td>
                                </tr>
                                <tr>
                                    <td>Bybit (合约)</td>
                                    <td>35,123.45</td>
                                    <td>10,000.00</td>
                                    <td class="profit-positive">+123.45</td>
                                    <td class="profit-positive">+0.35%</td>
                                    <td>7</td>
                                    <td>11:28:10</td>
                                </tr>
                                <tr>
                                    <td>OKX (预留)</td>
                                    <td>100.00</td>
                                    <td>100.00</td>
                                    <td>0.00</td>
                                    <td>0.00%</td>
                                    <td>0</td>
                                    <td>11:27:50</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

    <script>
        // 初始化图表
        function initCharts() {
            // 订单统计图表
            const orderStatsChart = echarts.init(document.getElementById('order-stats-chart'));
            orderStatsChart.setOption({
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item'
                },
                color: ['#28a745', '#17a2b8', '#ffc107', '#dc3545'],
                series: [{
                    name: '订单状态',
                    type: 'pie',
                    radius: '70%',
                    data: [
                        { value: 42, name: '已完成' },
                        { value: 8, name: '进行中' },
                        { value: 3, name: '已取消' },
                        { value: 1, name: '失败' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                        }
                    },
                    label: {
                        color: '#212529'
                    }
                }]
            });

            // 收益曲线图表
            const profitChart = echarts.init(document.getElementById('profit-chart'));
            profitChart.setOption({
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07'],
                    axisLine: {
                        lineStyle: {
                            color: '#6c757d'
                        }
                    },
                    axisLabel: {
                        color: '#212529'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#6c757d'
                        }
                    },
                    axisLabel: {
                        color: '#212529'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e9ecef'
                        }
                    }
                },
                series: [{
                    name: '总权益',
                    type: 'line',
                    stack: '总量',
                    data: [19500, 29800, 39650, 40200, 50350, 60100, 70123],
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#28a745'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(40, 167, 69, 0.3)' },
                            { offset: 1, color: 'rgba(40, 167, 69, 0.05)' }
                        ])
                    }
                }]
            });

            // 资产分布图表
            const assetDistributionChart = echarts.init(document.getElementById('asset-distribution-chart'));
            assetDistributionChart.setOption({
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item'
                },
                color: ['#17a2b8', '#ffc107', '#28a745', '#dc3545', '#6610f2'],
                series: [{
                    name: '资产分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#ffffff',
                        borderWidth: 2
                    },
                    label: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14',
                            fontWeight: 'bold',
                            color: '#212529'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 35123, name: 'Bybit 合约' },
                        { value: 15000, name: 'Binance 现货' },
                        { value: 100, name: 'OKX' },
                        { value: 0, name: '其他' }
                    ]
                }]
            });

            // 窗口大小变化时调整图表大小
            window.addEventListener('resize', function () {
                orderStatsChart.resize();
                profitChart.resize();
                assetDistributionChart.resize();
            });

            return { orderStatsChart, profitChart, assetDistributionChart };
        }

        // 更新仪表盘数据
        function updateDashboard(data) {
            // 更新最后更新时间
            const now = new Date();
            document.getElementById('last-update').textContent = `最后更新: ${now.toLocaleString('zh-CN')}`;

            // 更新顶部卡片
            document.getElementById('program-status').innerHTML =
                data.status === 'RUNNING' ?
                    '<span class="status-badge status-running">运行中</span>' :
                    '<span class="status-badge status-stopped">已停止</span>';

            // 格式化数字显示
            const formatNumber = (num) => {
                return '$' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            };

            document.getElementById('funding-profit').textContent = formatNumber(data.today_funding_profit);
            document.getElementById('arbitrage-profit').textContent = formatNumber(data.total_arbitrage_profit);
            document.getElementById('total-equity').textContent = formatNumber(data.total_equity);

            // 更新运行时长
            document.getElementById('uptime').textContent = `运行时长: ${data.uptime || '00:00:00'}`;

            // 更新交易所状态列表
            const exchangeList = document.getElementById('exchange-status-list');
            exchangeList.innerHTML = '';
            data.exchanges.forEach(exchange => {
                const li = document.createElement('li');
                li.innerHTML = `
                    <span>${exchange.name}</span>
                    <span class="status-badge ${exchange.connected ? 'status-connected' : 'status-disconnected'}">
                        ${exchange.connected ? '已连接' : '连接断开'}
                    </span>
                `;
                exchangeList.appendChild(li);
            });

            // 更新策略状态列表
            const strategyList = document.getElementById('strategy-status-list');
            strategyList.innerHTML = '';
            data.strategies.forEach(strategy => {
                const li = document.createElement('li');
                let statusClass = 'status-stopped';
                let statusText = '已停止';

                if (strategy.status === 'RUNNING') {
                    statusClass = 'status-running';
                    statusText = '运行中';
                } else if (strategy.status === 'PAUSED') {
                    statusClass = 'status-paused';
                    statusText = '暂停';
                }

                li.innerHTML = `
                    <span>${strategy.name}</span>
                    <span class="status-badge ${statusClass}">${statusText}</span>
                `;
                strategyList.appendChild(li);
            });

            // 更新账户数据表格
            const tableBody = document.getElementById('account-data-body');
            tableBody.innerHTML = '';
            data.accounts.forEach(account => {
                const row = document.createElement('tr');
                const profitClass = account.profit >= 0 ? 'profit-positive' : 'profit-negative';
                const profitPercentClass = account.profit_percent >= 0 ? 'profit-positive' : 'profit-negative';

                row.innerHTML = `
                    <td>${account.name}</td>
                    <td>${account.total_balance.toLocaleString('en-US', { minimumFractionDigits: 2 })}</td>
                    <td>${account.available_balance.toLocaleString('en-US', { minimumFractionDigits: 2 })}</td>
                    <td class="${profitClass}">${account.profit >= 0 ? '+' : ''}${account.profit.toLocaleString('en-US', { minimumFractionDigits: 2 })}</td>
                    <td class="${profitPercentClass}">${account.profit_percent >= 0 ? '+' : ''}${account.profit_percent.toFixed(2)}%</td>
                    <td>${account.active_orders}</td>
                    <td>${account.last_sync_time}</td>
                `;
                tableBody.appendChild(row);
            });

            // 更新图表数据 (如果需要)
            // charts.profitChart.setOption({...});
            // charts.assetDistributionChart.setOption({...});
            // charts.orderStatsChart.setOption({...});
        }

        // 模拟数据获取
        function fetchDashboardData() {
            // 实际应用中，这里应该从后端API获取数据
            // 这里使用模拟数据进行演示
            const mockData = {
                status: 'RUNNING',
                uptime: '12:34:56',
                today_funding_profit: 128.50,
                total_arbitrage_profit: 2345.88,
                total_equity: 50123.45,
                exchanges: [
                    { name: 'Binance 现货', connected: true },
                    { name: 'Bybit 合约', connected: true },
                    { name: 'OKX', connected: false }
                ],
                strategies: [
                    { name: '资金费率套利', status: 'RUNNING' },
                    { name: '跨所现货套利', status: 'PAUSED' },
                    { name: '网格交易 (BTC/USDT)', status: 'RUNNING' }
                ],
                accounts: [
                    {
                        name: 'Binance (现货)',
                        total_balance: 15000.00,
                        available_balance: 5000.00,
                        profit: 50.00,
                        profit_percent: 0.33,
                        active_orders: 3,
                        last_sync_time: '11:28:05'
                    },
                    {
                        name: 'Bybit (合约)',
                        total_balance: 35123.45,
                        available_balance: 10000.00,
                        profit: 123.45,
                        profit_percent: 0.35,
                        active_orders: 7,
                        last_sync_time: '11:28:10'
                    },
                    {
                        name: 'OKX (预留)',
                        total_balance: 100.00,
                        available_balance: 100.00,
                        profit: 0.00,
                        profit_percent: 0.00,
                        active_orders: 0,
                        last_sync_time: '11:27:50'
                    }
                ]
            };

            return mockData;
        }

        // 初始化仪表盘
        function initDashboard() {
            // 初始化图表
            const charts = initCharts();

            // 初始加载数据
            const initialData = fetchDashboardData();
            updateDashboard(initialData);

            // 设置定时更新 (实际应用中应该使用WebSocket或其他实时更新机制)
            setInterval(() => {
                const newData = fetchDashboardData();
                // 模拟数据波动
                newData.total_equity += (Math.random() - 0.5) * 100;
                newData.today_funding_profit += (Math.random() - 0.5) * 10;
                updateDashboard(newData);
            }, 5000); // 每5秒更新一次
        }

        // 页面加载完成后初始化仪表盘
        document.addEventListener('DOMContentLoaded', initDashboard);
    </script>
</body>

</html>